<template>
  <view class="login-page" :style="my_style">
    <view class="bg-box">
      <view class="flex-between u-text-center font-32 u-m-b-44">
        <text class="tab-item" @click="replaceJump('/views/login/login')">登录</text>
        <text class="tab-item theme-color">注册</text>
      </view>
      <text class="font-48 font-weight-500">Hi，请注册</text>
      <!-- 表单 -->
      <view class="u-m-t-24 form">
        <input
          type="number"
          maxlength="11"
          v-model="mobile"
          class="u-m-b-20"
          placeholder="请输入手机号"
        />
        <view class="cell flex-between u-m-b-20">
          <input type="number" maxlength="6" v-model="verify_code" placeholder="请输入短信验证码" />
          <text class="code-btn" @tap="showCode">{{ btnCodeText }}</text>
        </view>
        <input
          type="password"
          maxlength="20"
          v-model="password"
          class="u-m-b-20"
          placeholder="请设置登录密码"
        />
        <input
          type="password"
          maxlength="20"
          v-model="re_password"
          class="u-m-b-52"
          placeholder="请再次输入登录密码"
        />
        <view
          class="primary-btn flex-center u-m-b-12"
          @tap="$u.debounce(registerWithMobileCode, 2000, true)"
          >确定</view
        >
        <u-checkbox v-model="is_agree" size="28" :active-color="theme_color" shape="circle">
          <text class="font-24 lh-34"
            >已阅读并同意
            <text
              class="theme-color"
              @tap.stop="jump('/views/login/protocol?tag=registeragreement')"
              >《服务协议》</text
            >和
            <text class="theme-color" @tap.stop="jump('/views/login/protocol?tag=privacypolicy')"
              >《隐私政策》</text
            ></text
          ></u-checkbox
        >
      </view>
    </view>
    <image-code :value="show_img" @confirm="confirmCode" />
  </view>
</template>
<script>
  import md5Libs from '@/utils/md5'
  import mixin from '@/mixin/captcha'
  import ImageCode from '@/components/common/ImageCode.vue'
  export default {
    mixins: [mixin],
    data() {
      return {
        active: 'login',
        is_agree: true,
        mobile: '', // 用户手机号
        verify_code: '', // 验证码
        password: '', // 密码
        re_password: '', // 确认密码
        show_img: false,
      }
    },
    components: {
      ImageCode,
    },
    onLoad(options) {},
    methods: {
      // 获取图形验证码
      showCode() {
        if (!this.mobile) {
          this.showMsg('请输入手机号码')
          return
        }
        if (!this.$u.test.mobile(this.mobile)) {
          this.showMsg('请输入正确的手机号码')
          return
        }
        this.show_img = true
      },
      // 确认输入图形验证码
      confirmCode(val) {
        this.show_img = false
        this.$u.debounce(
          () => {
            this.sendCaptcha(this.mobile, 'register', val)
          },
          2000,
          true
        )
      },
      /**
       * 用户登录-手机号、验证码（注册）
       */
      async registerWithMobileCode() {
        const { mobile, verify_code, password, re_password, is_agree } = this
        if (!verify_code) {
          this.showMsg('请输入短信验证码')
          return
        }
        if (!this.$u.test.rangeLength(password, [6, 16])) {
          this.showMsg('请输入6-16位密码')
          return
        }
        if (!this.$u.test.rangeLength(re_password, [6, 16])) {
          this.showMsg('请输入6-16位密码')
          return
        }
        if (re_password !== password) {
          this.showMsg('两次输入密码不一致!')
          return
        }
        if (!is_agree) {
          this.showMsg('请阅读并同意《服务协议》和《隐私政策》')
          return
        }
        let params = {
          mobile,
          verify_code,
          password: md5Libs.md5(password),
          re_password: md5Libs.md5(re_password),
          nonce: this.randomStr(10),
        }
        const res = await this.$api.common.user('registerWithMobileCode', params)
        if (res.code === 200) {
          const { access_token, client } = res.data
          uni.setStorageSync('access_token', access_token)
          uni.setStorageSync('member_id', client.member_id)
          this.successBack('注册成功')
        }
      },
    },
  }
</script>
<style lang="scss" scoped>
  .login-page {
    min-height: 100vh;
    padding: 100rpx 20rpx 66rpx;
    background: $uni-bg-color;

    .bg-box {
      width: 100%;
      height: 940rpx;
      padding: 28rpx 86rpx 40rpx;
      // background: url('../static/login/img_zhuce@3x.png');
      background-size: 100% 100%;
    }

    .tab-item {
      width: 50%;
      height: 100rpx;
      line-height: 100rpx;
      color: #666;
    }

    .form {
      input {
        height: 88rpx;
        border-bottom: 1px solid #ececec;
      }

      .cell {
        height: 88rpx;
        border-bottom: 1px solid #ececec;

        input {
          border-bottom: none;
        }

        .code-btn {
          padding: 6rpx 16rpx;
          font-size: 20rpx;
          line-height: 28rpx;
          color: #999;
          border: 1px solid #999;
          border-radius: 4rpx;
        }
      }
    }

    .theme-color {
      color: var(--color);
    }

    .primary-btn {
      width: 100%;
      height: 88rpx;
      font-size: 34rpx;
      color: #fff;
      background: var(--color);
      border-radius: 8rpx;
    }
  }
</style>
